let questionsComponent = {
    template: `
        <div class="questions page">
            <div class="head">
               <div class="left" @click="back">
                    <span class="iconfont icon-ali-fanhui"></span>
                </div>
                <div class="title">QUESTIONS</div>
                <div class="right"></div>
            </div>
            <div class="main">
                <div class="record-btn" @click="toCreate">
                    <span>New Question</span>
                </div>
                <div class="name">
                     Title: <input type="text" placeholder="" v-model="name" >
                </div>
                <div class="list">
                    <div class="question" v-for="(item,i) in questionList">
                         <div class="question-controls">
    
                              <div class="btn move" @click="handleMove(-1,i)" v-show="i!==0">Up</div>
                              <div class="btn move" @click="handleMove(1,i)" v-show="i!==questionList.length-1">Down</div>
                              <div class="btn del" @click="handleDelete(i,item)">Delete</div>
                         </div>
                          <div class="top">
       
                                <div class="label">{{i + 1}}</div><input type="text" placeholder="Your Question" v-model="item.title" >
                                <div class="btn add" @click="addOption(item)">Add</div>
                          </div>
                          <div class="options">
                            <div class="option" v-for="(option,index) in item.options">
                                    <span class="iconfont icon-ali-iconjianchu-jihuocopy" @click="handleDeleteOption(index,item)"></span>
                                <input type="text" placeholder="answer" v-model="option.title" >
                                <div class="score">
                                    <input v-model="option.score">
                                </div>
                                <div class="order">
         
                                  
                                    <span class="iconfont icon-ali-paixujiantoushang"  v-show="index!==0" @click="handleMoveOption(-1,index,item)"></span>
                                    <span class="iconfont icon-ali-paixujiantouxia" v-show="index!==item.options.length-1" @click="handleMoveOption(1,index,item)"></span>
          
                                </div>
                            </div>
                          </div>
       
                    </div>
                </div>
            </div>
            <div class="controls" >
                <div class="btn" v-for="btn in btnList" @click="controlHandle(btn)">
                   <div> {{btn.value}}</div>
                </div>
            </div>
            <dialogComponent :config="dialog"></dialogComponent>
        </div>
    `,
    components:{
        dialogComponent
    },
    data() {
        return {
            btnList: [
                {
                    name: 'preview',
                    value: 'Preview'
                },
                {
                    name: 'save',
                    value: 'Save'
                }
            ],
            questionList: [],
            rootUrl:rootUrl,
            dialog:{
                showState:false,
                title:'',
                content:'',
                confirmText:'',
                cancelText:'',
                confirmBack:null,
                cancelBack:null
            }
        }

    },
    computed: {

    },
    watch: {},
    mounted() {

            this.questionnaireId = this.$route.query.questionnaireId
            question.get(this.questionnaireId).then((r)=>{
                this.name = r.name
                this.questionList = r.items || []
            })


    },
    activated() {

    },
    methods: {
        isHaveUnfilled(){
            let flag = true
            this.questionList.forEach((item)=>{
                if(!item.title||!item.options.length){
                    flag = false
                }
                item.options.forEach((o)=>{
                    if((o.title!=null && o.title!='') || (o.score!=null && o.score!='')){
                        flag = false
                    }
                })
            })
            return flag
        },
        addOption(item){
            item.options.push({
                "title": "",
                'score': item.options.length+1
            })
        },
        nameChange(item,i){

        },
        handleDeleteOption(i,item){
            item.options.splice(i,1)
        },
        handleDelete(i,item){

            this.questionList.splice(i,1)

        },
        save(callBack){
            let questionList = []
            this.questionList.forEach((item)=>{
                let question = {
                    ...item
                }
                question.options = item.options.filter((o)=>{
                    return o.score != null && o.score != '' && o.title !=null && o.title!=''
                })
                if(question.options.length){
                    questionList.push(question)
                }
            })
            question.update(this.questionnaireId,{
                name: this.name,
                type: "0",
                description: "default Description",
                items: questionList
            }).then(()=>{
                if(callBack){
                    callBack()
                }
            })
        },
        controlHandle(item){
            switch (item.name){
                case 'save':
                    if(this.isHaveUnfilled()){
                        this.save(()=>{
                            this.$message.success('save success')
                        })
                    } else {
                        this.dialog = {
                            showState: true,
                            title: '',
                            content:'The unfilled content will not be saved. Are you sure to execute it!',
                            confirmText: 'confirm',
                            cancelText: 'cancel',
                            confirmStyle:{
                                color:'#FF5858'
                            },
                            cancelStyle:{
                                color:'#0086D0'
                            },
                            confirmBack: ()=>{
                                this.save(()=>{
                                    this.$message.success('save success')
                                })
                            },
                            cancelBack: ()=>{

                            }
                        }
                    }

                    break
                case 'preview':
                    this.$router.push({
                        name: 'detail',
                        query:{
                            type: 'preview',
                            sessionId: this.$route.query.sessionId,
                            page: 'question'
                        }
                    })
                    break
            }
        },
        back(){
            this.$router.back()
        },
        toCreate(){
            this.questionList.push({
                options:[],
                title:null
            })

        },
        handleMoveOption(type,i,item){
            let sectionList = item.options
            let temp = sectionList[i]
            let next = sectionList[i + type]
            if(type<0){
                item.options.splice(i+type,2,temp,next)
            } else {
                item.options.splice(i,2,next,temp)
            }
        },
        handleMove(type,i){
            let sectionList = this.questionList
            let temp = sectionList[i]
            let next = sectionList[i + type]
            if(type<0){
                this.questionList.splice(i+type,2,temp,next)
            } else {
                this.questionList.splice(i,2,next,temp)
            }
        }
    },
    beforeRouteLeave(to, from, next) {
        if(this.isHaveUnfilled()){
            next()
        } else {
            this.dialog = {
                showState: true,
                title: '',
                content:'The unfilled content will not be saved. Do you want to leave this page!',
                confirmText: 'confirm',
                cancelText: 'cancel',
                confirmStyle:{
                    color:'#FF5858'
                },
                cancelStyle:{
                    color:'#0086D0'
                },
                confirmBack: ()=>{
                    this.save(()=>{
                        next()
                    })
                },
                cancelBack: ()=>{

                }
            }
            next(false)
        }

    }
}


